.components-listitem {
	height: 36px;
	line-height: 36px;
	border-bottom: 1px solid #ddd;
	text-indent: 10px;
	cursor: pointer;
	padding: 5px 0;
	.hedaer{
		width: 34px;
		height: 34px;
		font-size: 0;
		margin-right: 20px;
		img{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.play{
		display: none;
		margin-left: 10px;
		position: relative;
		top: 5px;
		width: 16px;
		height: 16px;
		background-size: 16px auto;
		background-position: 0 -48px;
	}
	.delete {
		cursor: pointer;
		height: 16px;
		width: 16px;
		top: 3px;
		position: relative;
		transform: rotate(45deg);
		margin-right: 15px;
		&::before, &::after{
			content: '';
			display: none;
			background: #666;
			position: absolute;
		}
		&::before {
			width: 100%;
			height: 1px;
			top: 8px;
			left: 0;
		}
		&::after {
			height: 100%;
			width: 1px;
			left: 8px;
			top: 0;
		}
	}

	&.focus {
		color: #2f9842;

	}
}
.components-listitem:hover {
	background: #eee;
	.delete{
		&::before, &::after{
			display: block;
		}
	}
	.play{
		display: inline-block;
	}
}